<template>
  <div class="received">
    <el-container class="received-box">
      <!-- {{receiveList}} -->
      <div class="received-header">已收文</div>
     
      <div class="received-cont">
        <!-- 按钮 -->
        <div class="received-btnAll">
          <!-- <el-checkbox :value="isAllSelected" @change="toggleAllSend"></el-checkbox> -->
          <div class="received-btn">
            <el-button type="danger" @click="toggleAllReceive">删除</el-button>
            <el-button type="success">转发</el-button>
          </div>
        </div>
        <!-- 表格和分页 -->
        <el-container class="received-height"
          style="max-height: 740px;height: 740px;overflow: hidden;">
          <!-- 表头 -->
          <el-table :data="receiveList.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
            style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column label="发送人" prop="createUser"></el-table-column>
            <el-table-column label="文件名" prop="originalName"></el-table-column>
            <el-table-column label="文件大小" prop="fileSize">
              <template slot-scope="scope">
                {{ formatFileSize(scope.row.fileSize) }}
              </template>
            </el-table-column>
            <el-table-column label="更新时间" prop="updateTime">
              <template slot-scope="scope">
                {{ formatDate(scope.row.updateTime) }}
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary" @click.prevent="openReceive(scope.row)">详情</el-button>
                <el-button type="primary">转发</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
        </el-container>
        <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"
          :total="receiveList.length" layout="total, prev, pager, next, jumper" style="margin-left: 20px;text-align: center;" ></el-pagination>
      </div>
    </el-container>

  </div>
</template>

<script>
export default {
  name: 'receivedView',
  data () {
    return {
      // 城市数据（之前的 files）
      // cities: [
      //   { name: '林坚诚', size: 2048, time: '2024-12-18 11:30:00', textName: '关于07月份安保工作会议通知.pdf' },
      //   { name: '邹玉书', size: 1024, time: '2024-12-19 10:00:00', textName: '关于11月份安保工作会议通知.doc' },
      //   { name: '段安易', size: 4096, time: '2024-12-16 13:00:00', textName: '关于01月份安保工作会议通知.jpg' },
      //   { name: '姜宇航', size: 512, time: '2024-12-17 12:15:00', textName: '关于06月份安保工作会议通知.pdf' },
      // ],
      selectedReceive: [], // 选中的城市
      isAllSelected: false, // 控制全选框的状态
      currentPage: 1,    // 当前页
      pageSize: 12,      // 每页显示的条数
    }
  },

  computed: {
    receiveList () {
      return this.$store.getters['receiveList'];
    },
  },

  methods: {
    // 详情
    openReceive(receiveItem){
      this.$store.dispatch('updateReceiveItem', receiveItem);
      this.$router.push({ path: '/home/receiveDetails' });
    },
    // 分页
    handleCurrentChange (page) {
      this.currentPage = page;
    },
    // 格式化文件大小（这里依然是文件大小格式化）
    formatFileSize (size) {
      if (size < 1024) return `${size} B`;
      else if (size < 1048576) return `${(size / 1024).toFixed(2)} KB`;
      else if (size < 1073741824) return `${(size / 1048576).toFixed(2)} MB`;
      else return `${(size / 1073741824).toFixed(2)} GB`;
    },
    // 格式化时间
    formatDate (date) {
      return new Date(date).toLocaleString();
    },
    // 处理全选框的变化
    // toggleAllReceive (isSelected) {
    //   if (isSelected) {
    //     // 全选
    //     this.selectedReceive = this.receiveList.map(city => city.createUser);
    //   } else {
    //     // 取消全选
    //     this.selectedReceive = [];
    //   }
    // }
     // 处理全选框的变化
     toggleAllReceive () {
      console.log(this.selectedReceive);
    },
    handleSelectionChange (val) {
      this.selectedReceive = val;
    }
  },
  // watch: {
  //   // 监听选中的城市的变化，来更新全选框的状态
  //   selectedReceive (newselectedReceive) {
  //     if (newselectedReceive.length === this.receiveList.length) {
  //       this.isAllSelected = true;
  //     } else {
  //       this.isAllSelected = false;
  //     }
  //   }
  // }
}
</script>
<style lang="scss" scoped>
::v-deep.el-button {
  padding: 8px 30px !important;
}

::v-deep .el-container {
  overflow: hidden;
  /* 防止父容器显示默认滚动条 */
}

.received-list-items {
  flex: 1;
  // background: #F8F8F8;
  // margin: 0 3px;
}

.checked-item {
  background-color: #f7fdb19c;
  /* 选中后的背景颜色 */
  // border: 1px solid #67C23A;  /* 可选的边框颜色 */
  color: #fff;
  /* 文字颜色 */
}

.checked-item {
  transition: background-color 0.3s ease, color 0.3s ease;
}

.checked-item .checkbox-content .file-name,
.checked-item .checkbox-content .file-size,
.checked-item .checkbox-content .file-time {
  color: #333;
  /* 文字颜色，确保选中后文字也改变 */
}

.received {
  width: 100%;
}

.received-box {
  display: flex;
  flex-direction: column;

  .received-header {
    padding: 3px;
    height: 60px;
    line-height: 60px;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    background-color: white;
    border-bottom: 1px #ddd solid;
  }

  .friend-detail {
    display: flex;
    padding: 50px 80px 20px 80px;
    text-align: center;


    .info-item {
      margin-left: 20px;
      background-color: #ffffff;
      border-radius: 10px;
      border: 1px #ddd solid;
    }

    .description {
      padding: 20px 20px 0px 20px;
    }
  }

  .frient-btn-group {
    text-align: left !important;
    padding: 20px;
  }
}

.received-cont {
  display: flex;
  flex-direction: column;
  // padding-left: 20px;
  overflow: hidden;

  .received-btnAll {
    display: flex;
    padding: 20px 0;
    align-items: center;
    border-bottom: 1px #ddd solid;

    .received-height {
      height: 100%;
      overflow: auto;
    }

    .received-btn {
      margin-left: 15px;
    }

    // 

  }

  ::v-deep .el-checkbox {
    padding-left: 20px;
  }

  .received-checkbox {
    display: flex;
    flex-direction: column;

    img {
      width: 25px;
      height: 25px;
      margin: 0 100px;
    }

    ::v-deep .el-checkbox {
      display: flex;
      border-bottom: 1px #ddd solid;
      margin-right: 0;
    }

    .checkbox-content {
      display: flex;
      align-items: center;
      text-align: center;

      .file-name {
        margin: 0 50px;
        width: 100px;
        font-weight: bold;
      }

      .file-size {
        margin-left: 10px;
        width: 400px;
        color: #888;
      }

      .el-icon-document {
        font-size: 18px;
        color: #1890ff;
      }
    }

    ::v-deep .el-checkbox__label {
      display: flex;
      width: 100% !important;
      height: 70px;
    }

  }
}
</style>